import {
    init,
    classModule,
    propsModule,
    styleModule,
    eventListenersModule,
    h,
  } from "snabbdom";

// 创建patch函数
const patch = init([
    // Init patch function with chosen modules
    classModule, // makes it easy to toggle classes
    propsModule, // for setting properties on DOM elements
    styleModule, // handles styling on elements with support for animations
    eventListenersModule, // attaches event listeners
  ]);

let myVNode = h('a', {
  props: { 
    href:'http://www.baidu.com',
    target: '_blank'
    }
}, '百度')
const myNewVNode_one = h("div#container.two.classes", { on: { click: () => { console.log(123) } } }, [
  h("span", { style: { fontWeight: "bold" }, on: { click: () => {alert('点击了')} }}, "This is bold"),
  " and this is just normal text",
  h("a", { props: { href: "http://www.baidu.com", target: '_blank' } }, "I'll take you places!"),
]);

const myNewVNode_two = h("ul.three.new_class", { fontSize: '25px' }, [
  h("li", { style: { color: '#ff3040' }, key: 1 }, '植物'),
  h("li", { style: { color: '#666', fontSize: '20px' }, key: 2}, '动物'),
  h("div.list", { on: { click: () => { alert('触发事件')} }, key: 3}, '节肢动物')
])

const myNewVNode_three = h("ul.three.new_class", { fontSize: '25px' }, [
  h("li", h('div.move', 'gel')),
  h("li", { style: { color: '#ff3040' }, key: 1 }, '植物'),
  h("li", { style: { color: '#666', fontSize: '20px' }, key: 2}, '动物'),
  h("div.list", { on: { click: () => { alert('触发事件')} }, key: 3}, '节肢动物'),
])
// 让虚拟节点上树木
let container = document.getElementById("container")
// 按钮节点
let btn = document.getElementById('btn')
patch(container, myNewVNode_two)
btn.onclick = function() {
  patch(myNewVNode_two, myNewVNode_three)
}

// 在前面增加是重塑dom 在后面增加是在后面添加不进行重塑